<template>
    <div class="drill">
        <div class="drillTop">
            <p>{{drillData.dtop.title}}</p>
            <img :src="drillData.dtop.img" alt="">
        </div>
        <div class="drillMiddle">
            <p class="middleTitle">{{drillData.dmiddle.title}}</p>
            <div class="middleContent">
                <div class="middleContentLeft">
                    <p class="p1">{{drillData.dmiddle.dname}}</p>
                    <p class="p2"><span class="span1">{{drillData.dmiddle.difficulty}}</span>{{drillData.dmiddle.star}}<span class="span2">{{drillData.dmiddle.kilometer}}</span></p>
                </div>
                <div class="middleContentRight">
                    <p>
                        <span>{{drillData.dmiddle.dtime}}</span>
                    </p>
                </div>
            </div>
            
        </div>
        <div class="drillBottom">
            <p>{{drillData.dbottom.title}}</p>
            <img :src="drillData.dbottom.img" alt="">
        </div>
        
    </div>
    
</template>
<script>

export default {
    name:"DrillList",
    data(){
        return{

        }
    },
    props:{
        drillData:{
            type:Object,
            default:function(){
                return {}
            }
        }
    },
    methods:{
      
    },
    mounted(){
    }
}
</script>
<style scoped lang="less">
.drill{
    background-color: #efefef;
    color: #171818;
    overflow: hidden;
    .drillTop{
        background-color: #ffffff;
        text-align: center;
        overflow: hidden;
        margin-top: 2.5rem;
        margin-bottom: 7px;
        padding: 3px 5px;
        p{
            margin: 5px 0
        }
        img{
            width: 100%;
        }
    }
    .drillMiddle{
        padding: 8px 0;
        background-color: #ffffff;
        margin-bottom: 7px;
        .middleTitle{
            text-align: center;
            margin-bottom: 8px;
        }
        .middleContent{
            border-top:2px solid #efefef;
            border-bottom: 2px solid #efefef;
            display: flex;
            padding: 3px 10px;
            .middleContentLeft{
                flex: 3;
                .p1{
                    margin: 5px 0;
                    font-size: 18px;
                }
                .p2{
                    margin: 14px 0;
                    .span1{
                        font-size: 14px;
                        margin-right: 24px;
                    }
                    .span2{
                        font-size: 14px;
                        margin-left: 50px;
                    }
                }
            }
            .middleContentRight{
                display: flex;
                flex: 1;
                justify-content: flex-end;
                align-items: center;
                span{
                    // display: inline-block;
                    width: 100%;
                    
                }
            }
        }

    }
    .drillBottom{
        background-color: #ffffff;
        padding: 3px 5px;
        margin-bottom: 2.5rem;
        p{
            text-align: center;
            margin: 5px 0
        }
    }
}

</style>

